<template>
  <div class="m-dashboard">
    <div class="g-container">
      <div class="g-content">
        <x-form ref="formRef" v-model:model="form" wrap inline label-placement="left">
          <n-form-item label="公司主体">
            <n-select v-model:value="form.companyName" placeholder="请选择公司主体" :options="companyList" clearable />
          </n-form-item>
          <n-form-item label="ID">
            <n-input v-model:value="form.companyId" placeholder="请输入ID" clearable />
          </n-form-item>
          <n-form-item label="联系人">
            <n-input v-model:value="form.accountName" placeholder="请输入联系人" clearable />
          </n-form-item>
          <n-form-item label="联系人手机号">
            <n-input v-model:value="form.accountMobile" placeholder="请输入联系人手机号" clearable />
          </n-form-item>
          <x-button type="primary" @click="handleSubmit">查询</x-button>
          <x-button @click="handleRefresh">重置</x-button>
        </x-form>
      </div>
      <div class="g-content">
        <div>
          <x-button type="primary" @click="handleEdit('add', {})">添加账户</x-button>
        </div>
        <div>
          <x-data-table
            ref="tableRef"
            v-model:immediate="immediate"
            :params="paginationParams"
            :columns="columns"
            :row-key="(row) => row.id"
            row-class-name="text-sm"
            max-height="infinite"
          />
        </div>
      </div>
    </div>
    <AddDominantEdit v-if="modalAdd.show" :modal-data="modalAdd" @success="handleRefresh" />
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, h, onMounted } from 'vue'
  import { XForm, XButton, XDataTable } from '@/components'
  import { NFormItem, NSelect, NInput, NSpace, NText } from 'naive-ui'
  import AddDominantEdit from '@/views/account/components/AddDominantEdit.vue'
  import { useStore } from '@/store'
  const store = useStore()

  const modalAdd = ref({
    show: false,
    type: 'add',
    row: null
  })
  const tableRef = ref(null)
  const formRef = ref(null)
  const form = ref({
    companyName: '',
    companyId: '',
    accountName: '',
    accountMobile: ''
  })
  const companyList = ref([])
  const immediate = ref(true)
  const paginationParams = computed(() => {
    return {
      actions: 'account/companyList',
      data: {
        ...form.value
      }
    }
  })
  const columns = ref([
    {
      title: 'ID',
      key: 'companyId',
      width: 120
    },
    {
      title: '登录邮箱',
      key: 'accountMailbox',
      width: 120
    },
    {
      title: '登录密码',
      key: 'accountPassword',
      width: 120
    },
    {
      title: '公司名称',
      key: 'companyName',
      width: 120
    },
    {
      title: '联系人',
      key: 'accountName',
      width: 120,
      render(row: any) {
        return h(NSpace, { vertical: true }, () => [
          h(NText, {}, () => row.accountName),
          h(NText, {}, () => row.accountMobile)
        ])
      }
    },
    {
      title: '操作人员',
      key: 'editorName',
      width: 120,
      render(row: any) {
        return h(NSpace, { vertical: true }, () => [
          h(NText, {}, () => row.editorName),
          h(NText, {}, () => row.editedAt)
        ])
      }
    },
    {
      title: '操作',
      key: 'action',
      width: 120,
      render(row: any) {
        return h(NSpace, () => [
          h(
            XButton,
            {
              type: 'primary',
              text: true,
              onClick: () => handleEdit('edit', row)
            },
            () => '编辑'
          )
        ])
      }
    }
  ])

  onMounted(() => {
    // 获取公司主体列表
    getCompanyList()
  })
  const getCompanyList = async () => {
    const { data } = await store.dispatch('account/companyNameList', {
      pageSize: 10000
    })
    const list: { value: any; label: any }[] = []
    data.forEach((item: any) => {
      list.push({
        value: item,
        label: item
      })
    })
    companyList.value = list
  }

  const handleSubmit = () => {
    immediate.value = true
  }
  const handleRefresh = () => {
    formRef.value.resetFields()
    handleSubmit()
  }

  const handleEdit = (type: string, row: any) => {
    console.log('编辑', row)
    modalAdd.value.show = true
    modalAdd.value.row = JSON.parse(JSON.stringify(row))
    modalAdd.value.type = type
  }
</script>

<style lang="scss" scoped>
  .m-dashboard {
    height: calc(100vh - 70px);
    .help {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 90px;
      height: 90px;
      color: #ffffff;
      border-radius: 4px;
      margin: 10px;
      background: url('../../assets/images/help-2.png') no-repeat left,
        url('../../assets/images/help-1.png') no-repeat 85% / auto 100%, linear-gradient(90deg, #717aff, #5a67ff);
      cursor: pointer;

      .title {
        font-size: 20px;
        margin-bottom: 5px;
        font-weight: 600;
      }
    }
    .welcome {
      padding-top: 250px;
      text-align: center;
      font-size: 40px;
    }
  }
</style>
